<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Novo Turnos</title>
        <script type="text/javascript" src="../js/jquery.js" ></script>
        <script type="text/javascript" src="../js/jquery.validate.js"></script>
        <script type="text/javascript" src="../js/forms.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.2.custom.min.js" ></script>
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css">
        <link rel="stylesheet" href="../css/forms.css">
    </head>
    <script>
        $(document).ready(function(){

            $("#form").validate({
                rules: {
                    desc_turno: {required: true}
                    ,hora_inicio: {required: true}
                    ,hora_fim: {required: true}
                },
                submitHandler: function(form) {
                    salvar(form);
                    if (form.action.indexOf("insert.jsp")>=0){
                        form.reset();
                    }
                }
            });

            $("#novoitem").click(function(){add()});
        });

        function add(){
            var id = parseInt($("#horas >div:last >input:first").val())+1;
            var txt = '<br><div><input type="hidden" value="'+id+'" name="id_horario" id="horario">'+
                '<label >Início</label>'+
                '<input type="text" name="hora_inicio_'+id+'" size="5" maxlength="5" class="required" value="07:00">'+
                '<label >Fim</label>'+
                '<input type="text" name="hora_fim_'+id+'" size="5" maxlength="5" class="required" value="12:00"></div>';
            $("#horas").append(txt);
        }
    </script>


    <body>

        <form name="form" id="form" method="post" action="insert.jsp" >
            <div id="formulario">
                <fieldset><legend>Dados</legend>
                    <p><label class="lbInput">Turno<em>*</em></label>
                        <input type="text" name="desc_turno" size="30" maxlength="80" class="required">
                    </p>
                    <p></p>
                    <div style="border:1px solid black;width:400px;">
                        <label class="lbInput">Horários</label>
                        <br>
                        <div id="horas" style="display:block">
                            <div>
                                <input type="hidden" value="1" name="id_horario" id="horario">
                                <label >Início</label>
                                <input type="text" name="hora_inicio_1" size="5" maxlength="5" class="required" value="07:00">
                                <label >Fim</label>
                                <input type="text" name="hora_fim_1" size="5" maxlength="5" class="required" value="12:00">
                            </div>
                        </div>
                        <br>
                        <input class="submit" type="button" id="novoitem" value="Novo">
                        <br>
                    </div>
                    <p>
                        <input class="submit" type="submit" value="Salvar">
                        <input class="submit" type="button" value="Remover" onclick="remover(document.forms[0])" style="visibility:hidden">
                        <input class="submit" type="button" value="Listar" onclick="listar('fm_lista_Turnos.jsp')">
                    </p>
                    <div id="ajax_dados" style="display:block">
                    </div>
                    <div id="msg" style="display:none"></div>
                </fieldset>
            </div>
        <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
    </body>
</html>
